<template>
  <div :id="dhplayerId" v-dwloading="loading">
    <div v-show="!loading && !isInitPlugin" class="wh-full flex-col-center noplugin">
      <!-- <DwImage class="w-80px h-80px" :src="useImageUrl('chajian.png')" /> -->
      <div class="color-#fff text-18px font-phBlod">提示</div>
      <div class="color-#fff py-10px">您未下载插件，请下载插件</div>
      <a class="link_a" href="//minio.diweiyunlian.cn/cdn/web/gds/DHPlayerSetup.exe">
        <el-button>下载</el-button>
      </a>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch, nextTick, computed } from 'vue'
import './videoPlayer/videoPlayer.js'
const dhplayerId = ref(+new Date())

const props = defineProps({
  ids: {
    type: Array,
    default: () => []
  },
  division: {
    type: Number,
    default: 1
  },
  config: {
    type: Object,
    default () {
      return {
        shieldClass: ['gdsDialog', 'el-popper'],
        showBar: false
      }
    }
  }
})

const emits = defineEmits(['clickItem'])
const isInitPlugin = ref(false)
const loading = ref(false)

const host = '222.213.173.148'
const port = '10443'
const username = 'openapi'
const password = 'dh123456'

let myVideoPlayer = ref(null)

function initDHPlayer () {
  loading.value = true
  // document.querySelector("#desc").innerHTML = "正在登录中...请等待登录完成再进行视频播放"
  myVideoPlayer.value = new VideoPlayer({
    videoId: dhplayerId.value, // 唯一标识，必填，不能重复
    windowType: 0, // 播放器类型，必传， 0 - 实时预览，3 - 录像回放，7- 录像回放（支持倒放）
    usePluginLogin: true, // 采用登录 (请默认传true，插件内部自动拉流)
    pluginLoginInfo: { // 传入 icc 平台的登录信息
      host, // icc 平台ip
      port, // icc 平台端口 https 默认 443
      username, // icc 平台用户名
      password // icc 平台密码
    },
    division: props.division, // 默认展示的窗口数量， 必传
    draggable: false, // 窗口拖拽 【暂不支持】
    showBar: props.config.showBar, // 底部操作栏， 选传，【true - 显示, false - 隐藏】
    shieldClass: props.config.shieldClass, // 如果DOM元素被插件挡住了，把DOM元素的类名传入。
    coverShieldClass: [], // 如果插件要在dom内滚动，需要把DOM元素的类名传入，请查看案例-遮挡
    parentIframeShieldClass: [], // 有 iframe 时，top层 的 dom 元素被插件挡住了，把DOM元素的类名传入。
    // 下面均为回调函数，请按需使用，具体可在 API 内进行功能的体验和查看。

    // 创建播放器成功回调
    createSuccess: (versionInfo) => {
      // 该回调触发后，我们可以进行实时预览/录像回放等操作
      // document.querySelector('#desc').innerHTML = '创建成功!!!' + versionInfo.message
      loading.value = false
      startReal()
    },
    // 创建播放器失败回调
    createError: (err) => {
      // 有错误码，可打印查看错误信息
      // document.querySelector('#desc').innerHTML = '创建失败!!!' + JSON.stringify(err)
      isInitPlugin.value = err.success
      loading.value = false

      console.log('创建失败loading', err, loading.value)
    },
    // 插件公共回调
    dhPlayerMessage: (info, err) => { },
    // 实时预览成功回调
    realSuccess: (info) => { },
    // 实时预览失败回调
    realError: (info, err) => {
      console.log('实时预览失败', info, err)
    },
    // 对讲成功回调
    talkSuccess: (info) => { },
    // 对讲失败回调
    talkError: (info, err) => { },
    // 录像播放成功回调
    playbackSuccess: (info) => { },
    // 录像播放失败回调
    playbackError: (info, err) => { },
    // 录像播放完成回调
    playbackFinish: (info) => { },
    // 抓图成功回调
    snapshotSuccess: ({ base64Url, path }, info) => {
      let byteCharacters = atob(
        base64Url.replace(/^data:image\/(png|jpeg|jpg);base64,/, '')
      )
      let byteNumbers = new Array(byteCharacters.length)
      for (let i = 0; i < byteCharacters.length; i++) {
        byteNumbers[i] = byteCharacters.charCodeAt(i)
      }
      let byteArray = new Uint8Array(byteNumbers)
      let blob = new Blob([byteArray], {
        type: undefined
      })
      let aLink = document.createElement('a')
      aLink.download = '图片名称.jpg' // 这里写保存时的图片名称
      aLink.href = URL.createObjectURL(blob)
      aLink.click()
    },
    // 本地录像下载成功回调
    videoDownloadSuccess: (path, info) => {
      alert('本地录像地址：' + path)
    },
    // 关闭视频窗口回调
    closeWindowSuccess: ({ isAll, snum, channelList }) => { },
    // 鼠标单击窗口回调
    clickWindow: (snum) => {
      const data = props.ids[snum]
      emits('clickItem', data, snum)
    },
    // 鼠标双击窗口回调
    dbClickWindow: (snum) => { },
    // 播放器窗口的数量回调
    changeDivision: (division) => {

    },
    // rtsp 流下载录像成功回调
    downloadRecordSuccess: (info) => {
      console.log('下载流成功', info)
    },
    // rtsp 流下载录像失败回调
    downloadRecordError: (info, err) => {
      console.log('下载流失败', info, err)
    }
  })
}

onMounted(() => {
  if (port) {
    initDHPlayer()
  }
})

onUnmounted(() => {
  if (myVideoPlayer.value) {
    // myVideoPlayer.value.destroy()
  }
})

// 实时预览
function startReal () {
  if (!myVideoPlayer.value) {
    // document.querySelector("#desc").innerHTML = "不能播放，请先初始化插件！！！！！"
    return
  }

  const channelIdArr = props.ids

  myVideoPlayer.value._update({
    division: props.division
  })

  const videoRes = channelIdArr.map((channelId, index) => {
    return {
      channelId, // 通道id 【必传】
      channelName: channelId, // 通道名称 (用于本地录像下载)
      snum: index, // 即将要播放的窗口序号，从0开始 【必传】
      streamType: 1, // 1-主码流  2-辅码流 (可不传，默认主码流)
      deviceType: 5, // 设备类别 (插件对讲时，需要配置该参数，否则无法对讲)
      cameraType: '1', // 摄像头类型 (用于云台)
      capability: '00000000000000000000000000000001' // 能力集 (用于云台)
    }
  })

  myVideoPlayer.value.startReal(videoRes)
}

// 回放
function startPlayback ({
  id,
  startTime,
  endTime
}) {
  myVideoPlayer.value.startPlayback([
    {
      channelId: id, // 通道id
      channelName: id, // 通道名称
      startTime, // 开始时间
      endTime, // 结束时间
      recordSource: 3, // 录像类型 2-设备录像 3-中心录像
      streamType: 0, // 0-所有码流 1-主码流  2-辅码流
      snum: 0, // 播放的窗口序号 (从0开始计数，表示第一个窗口)
      decodeMode: 2 // 0-软解 2-快速硬解 【不传默认快速硬解】
    }
  ])
}

// 下载
function startDownloadRecord ({
  id,
  startTime,
  endTime
}) {
  myVideoPlayer.value.startDownloadRecord([
    {
      channelId: id, // 通道id
      channelName: id, // 通道名称
      startTime, // 开始时间
      endTime, // 结束时间
      recordSource: 3, // 录像类型 2-设备录像 3-中心录像
      streamType: 0, // 0-所有码流 1-主码流  2-辅码流
      snum: 0, // 播放的窗口序号 (从0开始计数，表示第一个窗口)
      decodeMode: 2 // 0-软解 2-快速硬解 【不传默认快速硬解】
    }
  ])
}

watch(() => props.ids, () => {
  nextTick(() => {
    if (port) {
      startReal()
    }
  })
}, {
  // immediate: true
})

defineExpose({
  startReal,
  startPlayback,
  startDownloadRecord
})
</script>

<style lang="scss" scoped>
.link_a{
  font-size: 30px;
  color: #f00;
  height: 40px;
  display: block;
}
.noplugin{
  background-color: rgba($color: #000000, $alpha: 0.5);
}
</style>
